<template>
  <div class="interview" v-if="interview">
    <div class="interview-list01" >
      <h3>{{ interview.data.title }}</h3>
      <div class="clearfix">
        <h4>
          {{
            interview.data.created_at
              .slice(0, 16)
              .replace("-", "年")
              .replace("-", "月")
          }}
        </h4>
        <div class="like">
          <span>2022</span>
          <span>0</span>
          <span>0</span>
        </div>
      </div>
      <p class="list01-content">{{ interview.data.description }}</p>
      <div class="btns">
        <button>关注TA</button>
      </div>
    </div>
    <div class="interview-list02">
      <div class="pic-author">
        <div class="avater-contain">
          <img :src="`https://ss.lanqb.com/${interview.user.avatar}`" alt="" />
        </div>
        <div class="author">
          <h3>本期嘉宾</h3>
          <p>{{ interview.user.nickname }}</p>
        </div>
      </div>
      <p>{{ interview.teacher.introduction }}</p>
    </div>
    <div class="interview-list03" v-html="interview.data.content">
      
    </div>
  </div>
</template>

<script>
export default {
  name: "DachuTwoInfo",

  data() {
    return {
      interview: "",
      pageId: null,
    };
  },

  methods: {},

  created() {
    this.pageId = this.$route.params.id;
    console.log(this.$route);
    fetch(`https://m.lanqb.com/api/daniu/interview/${this.pageId}`)
      .then((res) => res.json())
      .then((data) => {
        this.interview = data;
        console.log(this.interview);
      });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: PingFangSC-Regular, microsoft yahei, arial;
}
.interview {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 15px 0px 15px;
  height: calc(100vh - 48px - 44px - 56px - 5px);
  overflow-y: scroll;
  .interview-list01 {
    h3 {
      font-weight: bolder;
      color: #333;
      font-size: 24px;
      line-height: 30px;
    }
    .clearfix {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        font-size: 14px;
        color: #9f9f9f;
      }
      .like {
        span {
          margin-left: 15px;
        }
      }
    }
    .list01-content {
      background-color: #f4f4f4;
      color: #595959;
      line-height: 25px;
      font-size: 16px;
      padding: 10px;
      word-wrap: break-word;
      word-break: break-all;
    }
    .btns {
      width: 100%;
      margin: 20px auto;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      button {
        width: 132px;
        height: 38px;
        color: #634b19;
        background: #edce8c;
        border: none;
        border-radius: 19px;
        font-size: 17px;
      }
    }
  }
  .interview-list02 {
    .pic-author {
      display: flex;
      justify-content: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      .avater-contain {
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .author {
        display: flex;
        flex-direction: column;
        justify-content: center;
        h3 {
          margin-bottom: 5px;
        }
        p {
        }
      }
    }
    p {
      color: #9f9f9f;
      border-top: 1px solid #efefef;
      line-height: 24px;
      font-size: 15px;
      padding:10px 0;
    }
  }
}
</style>
